<template>
  <div v-if="this.$route.name == 'productbaseEdition'" class="app-container">
    <vue-element-loading
      :active="this.$store.state.elementloading.vueElementLoading"
      spinner="spinner"
      color="#FF6700"
    />
    <el-card shadow="never">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchMap"
        style="margin-top: 20px;margin-left: 0px"
      >
        <el-form-item>
          <div style="width:240px">
            <el-input
              maxlength="50"
              @keyup.enter.native="searchBase"
              v-model.lazy="searchMap.bName"
              placeholder="请输入基地名称"
            >
              <template slot="prepend">基地名称</template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:240px">
            <el-input
              maxlength="50"
              @keyup.enter.native="searchBase"
              v-model.lazy="searchMap.bInputLocation"
              placeholder="请输入基地地址"
            >
              <template slot="prepend">基地地址</template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="select">
            <el-select v-model="searchMap.mName" clearable placeholder="请选择药材">
              <el-option
                v-for="(index, item) in mNameList"
                :key="index"
                :label="item[index]"
                :value="index"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width: 120px">
            <el-select v-model="searchMap.bArea" clearable placeholder="基地面积">
              <el-option
                v-for="option in baseArea"
                :key="option.type"
                :label="option.name"
                :value="option.value"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item>
          <div id="distpicker-warpper">
            <v-distpicker
              id="select-dis"
              :province="province"
              :city="city"
              :area="area"
              @selected="onSelected"
              @province="handleProvince"
              @city="handleCity"
              @area="handleArea"
            ></v-distpicker>
          </div>
        </el-form-item>
        <el-button @click="searchBase" icon="el-icon-search"></el-button>
      </el-form>

      <div style="width: 100%;margin-top: 20px">
        <!-- 记录以下，wtf，宽度如果设置成100%，在切换页面是表格出现抖动的谜之现象
              解决方法：设置为99%
        -->
        <el-table
          v-if="list.length > 0 || list !== null || list.length !== null"
          :data="list"
          max-height="500"
          border
          style="width: 99%"
          @row-click="chooseone"
          highlight-current-row
        >
          <el-table-column width="55">
            <template slot-scope="scope">
              <el-radio v-model="radio" :label="scope.row.id">
                <span class="el-radio__label"></span>
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="eTime" label="版本时间"></el-table-column>
          <el-table-column prop="bName" label="基地名称"></el-table-column>
          <el-table-column prop="bPosition" label="位置信息"></el-table-column>
          <el-table-column prop="bArea" label="基地面积(亩)" align="center" width="120px"></el-table-column>
          <el-table-column align="center" prop="environment" label="生态环境" width="110px">
            <template slot-scope="scope">
              <el-button @click="openenvironment(scope.row)" size="small" type="primary">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="photosEdit" label="基地照片" align="center" width="110">
            <template slot-scope="scope">
              <el-button @click="openbasephoto(scope.row)" size="small" type="danger">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="companies" label="所属公司" align="center">
            <template slot-scope="scope">
              <el-button @click="openCompany(scope.row)" size="small" type="primary">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="gpsPosition" label="Gps位置" align="center">
            <template slot-scope="scope">
              <el-button @click="showgps(scope.row)" size="small" type="primary">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="medicinalNames" label="生产的药材"></el-table-column>
          <el-table-column align="center" prop="bRemarks" label="备注信息"></el-table-column>
        </el-table>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10,15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>

    <!-- 生态环境弹窗 -->
    <el-dialog
      v-dialogDrag
      style="font-family:'微软雅黑'"
      title="环境详情"
      :visible.sync="dialogEnviroForm"
    >
      <environment-form :enviroformData="enviroform"></environment-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogEnviroForm = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 基地照片弹窗 -->
    <el-dialog
      v-dialogDrag
      title="基地照片"
      :before-close="imgsDialogClose"
      :visible.sync="dialogbaseArea"
      width="700px"
      :lock-scroll="true"
    >
      <template>
        <!--<el-carousel :interval="4000" type="card" height="500px">
          <el-carousel-item v-for="item in 15" :key="item">
            <el-image
              style="width: 500px;height: 400px"
              :src="`image/baseAreaPhoto/${item}.jpg`"
              :fit="fit"
            ></el-image>
          </el-carousel-item>
        </el-carousel>-->
        <el-row :guntter="0">
          <vue-element-loading
            :active="this.$store.state.elementloading.imgLoading"
            spinner="spinner"
            color="#FF6700"
          />
          <el-col :span="6" class="block" v-for="(img,index) in imgs" :key="index">
            <el-image
              style="width: 180px;height: 200px"
              :src="BASEURL + path + '/' +img.tImgId"
              :fit="fit"
              lazy
            ></el-image>
          </el-col>
        </el-row>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeImgs">关 闭</el-button>
      </div>
      <!-- <span slot="footer" class="dialog-footer"></span> -->
    </el-dialog>

    <!-- 所属公司弹窗 -->
    <el-dialog v-dialogDrag :lock-scroll="true" title="环境详情" :visible.sync="dialogCompanyForm">
      <company-form :companyformData="companyform"></company-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogCompanyForm = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- gps弹窗 -->
    <el-dialog v-dialogDrag width="500px" title="Gps位置" :visible.sync="dialogFormGps">
      <template>
        <baidu-map
          class="bm-view"
          :center="center"
          :zoom="zoom"
          :scroll-wheel-zoom="true"
          ak="IGv3m1D92jWLXobdMPUyfY5hCD5j34Oz"
          ref="myMap"
          @ready="mapReady"
          @click="getClickInfo"
          @row-click="chooseone"
        >
          <bm-scale></bm-scale>
        </baidu-map>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormGps = false">关 闭</el-button>
        <!-- <el-button type="primary" @click="addData('pojoForm')">确 定</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import EnvironmentForm from "./form/environmentForm";
import CompanyForm from "./form/companyForm";
import productbaseEditionApi from "@/api/productbaseEdition";
import VDistpicker from "v-distpicker";
import VueElementLoading from "vue-element-loading";

const BASEURL = "https://image.zysuyuan.cn:8031/";

// 基地面积
const baseArea = [
  { type: "1", name: "≥100亩", value: "100" },
  { type: "2", name: "≥500亩", value: "500" },
  { type: "3", name: "≥1000亩", value: "1000" },
  { type: "4", name: "≥5000亩", value: "5000" },
  { type: "5", name: "≥10000亩", value: "10000" }
];
export default {
  components: {
    VDistpicker,
    VueElementLoading,
    EnvironmentForm,
    CompanyForm
  },
  data() {
    return {
      baseArea,
      enviroform: {
        bWaterEnvironment: "",
        bSoilEnvironment: "",
        bAirEnvironment: "",
        bTotalityAppraise: "",
        bEnvironmentDataImgPath: ""
      },
      companyform: {
        bCompanyName: "",
        bCompanyPosition: "",
        bCompanyPerson: "",
        bCompanyContact: "",
        bCompanyMedicinal: "",
        bCompanyRemarks: ""
      },
      // 百度地图
      center: { lng: 0, lat: 0 },
      zoom: 3,
      // 调整装备
      locData: {
        ids: 0, //设置定位id
        longitude: "", //设置定位经度
        latitude: "" //设置定位纬度
      },
      options: [
        {
          value: "选项1",
          label: "省"
        },
        {
          value: "选项2",
          label: "市"
        },
        {
          value: "选项3",
          label: "区"
        }
      ],
      total: 0, //总记录数
      currentPage: 1, //当前页码
      pageSize: 5, //每页显示10条数据
      radio: null,
      list: [],
      mNameList: [], // 药材名称列表
      searchMap: {
        page: "",
        size: "",
        bName: "", // 基地名称
        bInputLocation: "", // 基地地址
        mName: "", //生产药材
        bArea: "", // 基地面积
        bProvinceSeek: "", // 省
        bCitySeek: "", //市
        bRegionSeek: "", //区
        eTime: ""
      },
      maplocation: {
        // 百度地图经纬度
        latitude: "", // 维度
        longitude: "" // 经度
      },
      // 省市区
      province: null,
      city: null,
      area: null,
      placeholders: {
        province: "------- 省 --------",
        city: "--- 市 ---",
        area: "--- 区 ---"
      },
      dialogFormGps: false, //gps弹窗
      dialogEnviroForm: false, //生态环境弹窗
      dialogCompanyForm: false, //公司详情弹窗
      dialogbaseArea: false,
      BASEURL,
      imgs: [],
      // 图片展示类型
      fit: "contain",
      path: ""
    };
  },

  created() {
    this.path = localStorage.getItem("imgPath");
    this.fetchData();
  },

  mounted() {
    setTimeout(() => {
      // document.getElementById('select-dis').firstChild.style.borderColor = '#dcdfe6';
      // document.getElementById('select-dis').getElementsByTagName('select')[1].style.borderColor = '#dcdfe6';
      // document.getElementById('select-dis').getElementsByTagName('select')[2].style.borderColor = '#dcdfe6';
      this.handleChangeDis();
    }, 10);
  },

  watch: {
    $route(to, from) {
      this.path = localStorage.getItem("imgPath");
      this.fetchData();
    }
  },

  methods: {
    chooseone(row) {
      this.radio = row.id;
      this.backup = row;
      this.backup2 = row;
    },
    handleSizeChange(val) {
      console.log(`每页${val}条`);
      this.pageSize = val;
      this.fetchData();
    },

    handleCurrentChange(val) {
      console.log(`当前页：${val}`);
      this.currentPage = val;
      this.fetchData();
    },
    // 绑定查询按钮
    searchBase() {
      this.currentPage = 1;
      this.fetchData();
    },
    fetchData() {
      this.searchMap.page = this.currentPage;
      this.searchMap.size = this.pageSize;
      this.searchMap.eTime = localStorage.getItem("eTime");
      // console.log(this.searchMap);
      var vm = this.$store;
      vm.commit("updateLoading", true);
      console.log(
        "是否开启加载",
        this.$store.state.elementloading.vueElementLoading
      );
      productbaseEditionApi.select(this.searchMap).then(resp => {
        // console.log(resp.data.rows);
        this.list = resp.data.rows;
        if (resp.data.rows) {
          vm.commit("updateLoading", false);
          console.log(
            "是否开启加载",
            this.$store.state.elementloading.vueElementLoading
          );
        }
        // this.radio = this.list[0].id;
        this.maplocation.latitude = this.list[0].bLatitude;
        this.maplocation.longitude = this.list[0].bLongitude;
        console.log(resp);
        this.total = resp.data.total;
      });
      productbaseEditionApi
        .selectMedicinalList(localStorage.getItem("eTime"))
        .then(resp => {
          this.mNameList = resp.data.entityList;
          console.log(this.mNameList);
        });
    },

    /*******三级地址*******/
    handleChangeDis() {
      let selectFirst = document.getElementById("distpicker-warpper");
      let selectAll = selectFirst.getElementsByTagName("select");
      // selectAll[1].style.color =  '#c0c4cc';
      for (var a = 0; a < selectAll.length; a++) {
        var selectEle = selectAll[a];
        selectEle.style.color = "#c0c4cc"; // 文字颜色
        // document.getElementById('select-dis').getElementsByTagName('select')[1][0].style.color = '#c0c4cc';
        // document.getElementById('select-dis').getElementsByTagName('select')[1][0].style.color = '#c0c4cc';
        selectEle.style.borderColor = "#d9d9d9"; // 边框颜色
      }
    },
    // 获取省市区的值
    handleProvince(data) {
      // 修改选中文字颜色
      // document.getElementById('distpicker-warpper').getElementsByTagName('select')[0].style.color = '#606266';
      document.getElementById("select-dis").firstChild.style.color = "#606266";
      // 赋值给变量
      this.searchMap.bProvinceSeek = data.value.slice(0, data.value.length - 1);
      if (this.searchMap.bProvinceSeek == "省") {
        this.searchMap.bProvinceSeek = "";
      }
      console.log("省：" + this.searchMap.bProvinceSeek);
    },
    handleCity(data) {
      // 修改选中文字颜色
      document
        .getElementById("select-dis")
        .getElementsByTagName("select")[1].style.color = "#606266";
      // 赋值给变量
      this.searchMap.bCitySeek = data.value.slice(0, data.value.length - 1);
      if (this.searchMap.bCitySeek == "市") {
        this.searchMap.bCitySeek = "";
      }
      console.log("市：" + this.searchMap.bCitySeek);
    },
    handleArea(data) {
      // 修改选中文字颜色
      document
        .getElementById("select-dis")
        .getElementsByTagName("select")[2].style.color = "#606266";
      // 赋值给变量
      this.searchMap.bRegionSeek = data.value.slice(0, data.value.length - 1);
      if (this.searchMap.bRegionSeek == "区") {
        this.searchMap.bRegionSeek = "";
      }
      console.log("区：" + this.searchMap.bRegionSeek);
    },
    onSelected(data) {
      if (data.province.code == undefined) {
        data.province.value = "";
      }
      if (data.city.code == undefined) {
        data.city.value = "";
      }
      if (data.area.code == undefined) {
        data.area.value = "";
      }
      // alert(data.province.value + ' | ' + data.city.value + ' | ' + data.area.value);
      console.log(
        data.province.value + " | " + data.city.value + " | " + data.area.value
      );
      console.log(data);
    },

    /******以下为各种弹窗******/
    showgps(row) {
      console.log(row);
      this.center.lng = row.bLongitude;
      this.center.lat = row.bLatitude;
      console.log("经度:" + this.center.lng);
      console.log("纬度:" + this.center.lat);
      this.zoom = 15;
      this.dialogFormGps = true;
      this.$nextTick(() => {
        this.zoom = 15;
      });
    },
    // 百度地图
    mapReady({ BMap, map }) {
      // this.center.lng = this.maplocation.longitude;
      // this.center.lat = this.maplocation.latitude;
      this.zoom = 15;
      window.map = map; //将map变量存储在全局
    },
    // 地图点击事件
    getClickInfo(e) {
      map.clearOverlays();
      var myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));
      map.addOverlay(myMarker);
      this.zoom = e.target.getZoom();
      this.locData.longitude = e.point.lng;
      this.locData.latitude = e.point.lat;
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;
      // this.fpojo.bLongitude = e.point.lng;
      // this.fpojo.bLatitude = e.point.lat;
    },

    // 弹出生态环境
    openenvironment(row) {
      this.enviroform.bWaterEnvironment = row.bWaterEnvironment;
      this.enviroform.bSoilEnvironment = row.bSoilEnvironment;
      this.enviroform.bAirEnvironment = row.bAirEnvironment;
      this.enviroform.bTotalityAppraise = row.bTotalityAppraise;
      console.log(this.enviroform);
      this.dialogEnviroForm = true;
    },

    // 弹出公司详情
    openCompany(row) {
      this.companyform.bCompanyName = row.bCompanyName;
      this.companyform.bCompanyPosition = row.bCompanyPosition;
      this.companyform.bCompanyPerson = row.bCompanyPerson;
      this.companyform.bCompanyContact = row.bCompanyContact;
      this.companyform.bCompanyMedicinal = row.bCompanyMedicinal;
      this.companyform.bCompanyRemarks = row.bCompanyRemarks;
      this.dialogCompanyForm = true;
    },

    // 查看基地照片
    openbasephoto(row) {
      var vm = this.$store;
      vm.commit("updateImgLoading", true);
      console.log("是否开启加载", this.$store.state.elementloading.imgLoading);
      var pojo = {
        tProductbaseId: row.id,
        eTime: localStorage.getItem("eTime")
      };
      productbaseEditionApi.selectImgsList(pojo).then(resp => {
        this.imgs = resp.data.rows;
        console.log(this.imgs);
        if (resp.data.rows) {
          vm.commit("updateImgLoading", false);
          console.log(
            "是否开启加载",
            this.$store.state.elementloading.imgLoading
          );
        }
      });
      this.dialogbaseArea = true;
    },
    // 关闭查看基地图片t弹窗
    closeImgs() {
      this.imgs = [];
      this.dialogbaseArea = false;
    },
    // 关闭图片弹窗之前的回调,及点击弹窗右上角叉叉关闭按钮之前的回调方法
    // 为了将图片数组清空，弹窗滚轮置顶
    imgsDialogClose() {
      this.imgs = [];
      this.dialogbaseArea = false;
    }
  }
};
</script>

<style>
.select {
  width: 130px;
}
.bm-view {
  width: auto;
  height: 500px;
}
</style>
<style lang="css" >
.el-dialog {
  max-height: calc(100% - 200px);
  /* max-height: 600px; */
  display: flex;
  flex-direction: column;
}
.el-dialog__body {
  overflow: auto;
}
.block {
  width: 200px;
  height: 220px;
  margin-left: 10px;
}
</style>
